<template>
	<div class="patientFeedback">
		<div style="width: 500px;">
			<span class="title">医院投诉</span>
		</div>
		<div class="form" style="height: 510px;">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
				<el-form-item label="投诉人姓名" prop="answer1" required>
					<el-input type="text" v-model="ruleForm.answer1" placeholder="请输入姓名" style="width: 200px;"
						:disabled="isAnonymous"></el-input>
					<el-button type="text" @click="toggleAnonymous">{{ isAnonymous ? '取消匿名' : '匿名' }}</el-button>
				</el-form-item>
				<el-form-item label="投诉人电话" prop="answer2" required>
					<el-input type="text" v-model="ruleForm.answer2" placeholder="请输入电话号码" style="width: 250px;"
						:disabled="isAnonymous"></el-input>
				</el-form-item>
				<el-form-item label="投诉内容" prop="answer3" required>
					<el-input type="textarea" v-model="ruleForm.answer3" placeholder="请输入投诉内容" :cols="20" :rows="3"
						style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="涉及科室/人员" prop="answer4" required>
					<el-input type="text" v-model="ruleForm.answer4" placeholder="请输入科室/人员"
						style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="投诉方式" prop="answer5" required>
					<el-input type="text" v-model="ruleForm.answer5" placeholder="请输入投诉方式"
						style="width: 200px;"></el-input>
				</el-form-item>
			</el-form>
			<el-form>
				<el-form-item>
					<el-button type="primary" @click="onSubmit('ruleForm')">提交</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div class="importants">
			<h1>医院患者投诉处理流程</h1>
			<h3>为及时处理各种投诉，保障公民的合法权益，促进医院改进服务，提高服务质量，维护医院形象。根据有关法律法规和医疗规章制度，结合医院的实际情况，制定投诉处理制度。</h3>
			<h2>一、投诉途径与渠道</h2>
			<ol>
				<li>
					医院投诉监督电话(0511-88619092)、医院电子邮箱(zjzyydb@163.com)，医院公众场所的意见投诉箱，各系统、科室、班组意见薄(本)。<br />
					建立院总值班制度，急诊期间接待来访、受理投诉，投诉电话(18906100399)。<br />
					院办公室、党委办公室为综合接待受理、协调投诉科室，其它职能科室受理职权范围内的投诉。
				</li>
			</ol>
			<h2>二、受理投诉的部门和范围</h2>
			<ol>
				<li>
					门诊部：受理并协调解决门诊患者对于医生服务态度、医疗质量、物价医保等方面的投诉。<br />
					受理地点：总服务台、门诊部主任办公室。投诉电话(0511-88619015、88619016)<br />
					院办公室：受理行政事务与管理方面的投诉。投诉电话(0511-88619092)<br />
					党委办公室：受理医德医风、职工违规违纪方面的投诉。投诉电话(0511-88619093)<br />
					人事科：受理职工劳动纪律方面的投诉。投诉电话(0511-88619091)<br />
					医教科：受理医疗质量、医疗纠纷方面的投诉。投诉电话(0511-88619085)<br />
					护理部：受理护理质量、护理纠纷方面的投诉。投诉电话(0511-88619089)<br />
					财务科：受理医疗收费记账,医疗物价方面的投诉。投诉电话(0511-88619087)<br />
					保卫科：受理医院安全方面的投诉。投诉电话(0511-88619086)<br />
					总务科：受理后勤保障方面的投诉。投诉电话(0511-88619090)<br />
					器械科：受理设备管理方面的投诉。投诉电话(0511-88619077)<br />
					疾控科：受理院内感染方面的投诉。投诉电话(0511-88619084)<br />
					药剂科：受理药品质量、价格及药事管理方面的投诉。投诉电话(0511-88619078)<br />
					各系统、各科室受理本系统和科室范围内的投诉。其它应该受理的投诉问题由相应的职能部门受理。
				</li>
			</ol>
			<hr />
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
	import axios from 'axios';

	export default {
		data() {
			let checkPhone = (rule, value, callback) => {
				if (!value) {
					callback(new Error('请输入手机号'));
					return;
				}

				if (!/^\d+$/.test(value)) {
					callback(new Error('手机号应为数字'));
					return;
				}

				if (value.length !== 11) {
					callback(new Error('手机号应为11位数'));
					return;
				}

				callback();
			}
			return {
				isAnonymous: false, // 控制匿名状态
				ruleForm: {
					date1: '',
					answer1: '',
					answer2: '',
					answer3: '',
					answer4: '',
					answer5: ''
				},
				rules: {
					date1: [{
						type: 'date',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					answer1: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					answer2: [{
						required: true,
						validator: checkPhone,
						trigger: 'blur'
					}],
					answer3: [{
						required: true,
						message: '请输入投诉内容',
						trigger: 'blur'
					}],
					answer4: [{
						required: true,
						message: '请输入设计科室/人员',
						trigger: 'blur'
					}],
					answer5: [{
						required: true,
						message: '请输入投诉方式',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			toggleAnonymous() {
				if (this.isAnonymous) {
					// 取消匿名
					this.isAnonymous = false;
					this.ruleForm.answer1 = '';
					this.ruleForm.answer2 = '';
					this.updateDynamicRules(); // 更新验证规则
				} else {
					// 设置匿名
					this.isAnonymous = true;
					this.ruleForm.answer1 = '匿名';
					this.ruleForm.answer2 = ' ';
					this.updateDynamicRules(); // 更新验证规则
				}
			},
			updateDynamicRules() {
				// 移除或添加电话字段的验证规则
				if (this.isAnonymous) {
					// 移除电话字段的验证规则
					this.rules.answer2 = [];
				} else {
					// 添加电话字段的验证规则
					this.rules.answer2 = [{
						required: true,
						validator: this.checkPhone,
						trigger: 'blur'
					}];
				}
			},
			onSubmit(formName) {
				this.timeFormat();
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// 收集表单数据
						let ruleForm = {
							date: new Date().toISOString(),
							name: this.ruleForm.answer1,
							phone: this.ruleForm.answer2,
							content: this.ruleForm.answer3,
							department: this.ruleForm.answer4,
							way: this.ruleForm.answer5
						};
						console.log(ruleForm);
						axios.post('http://localhost:8088/insertCopts', ruleForm)
							.then(response => {
								this.$message({
									message: '提交成功！',
									type: 'success'
								});
								console.log(response.data);
							})
							.catch(error => {
								this.$message.error('提交失败，请重新填写！');
								console.error(error);
							});
					} else {
						this.$message.error('提交失败，请重新填写！');
						console.log(this.ruleForm);
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.isAnonymous = false; // 重置匿名状态
				this.updateDynamicRules(); // 重置验证规则
			},
			timeFormat() {
				let oldDate1 = this.ruleForm.date1;
				let year1 = new Date(oldDate1).getFullYear();
				let month1 = new Date(oldDate1).getMonth() + 1;
				let day1 = new Date(oldDate1).getDate();
				let dateFormat1 = year1 + '-' + month1 + '-' + day1;
				console.log('投诉日期：', dateFormat1);
			}
		}
	};
</script>

<style lang="stylus-loader" rel="stylesheet/stylus">
	.el-input {
		height: 40px;
	}

	.patientFeedback .title {
		font-size: 24px;
		padding: 50px;
	}

	.patientFeedback .form {
		margin-top: 80px;
	}

	.patientFeedback {
		height: 600px;
		width: 900px;
		margin: 0 350px;
		padding: 20px;
	}

	.patientFeedback .checkbox {
		padding-bottom: 50px;
	}

	.patientFeedback .question {
		padding-right: 100px;
	}

	.importants {
		margin-top: 100px;
		color: #dfdfdf;
	}

	.importants h1 {
		font-size: 22px;
		margin: 0 0 20px 0;
	}

	.importants h2 {
		font-size: 18px;
		margin: 10px 0 30px 0;
	}

	.importants h3 {
		color: red;
		font-size: 14px;
		padding: 0 0 10px 40px;
	}

	.importants li {
		margin-left: 30px;
		margin-bottom: 20px;
	}
</style>